import type { FormProps } from 'antd';
import { Button, Select, Form, Input } from 'antd';
type FieldType = {
	username?: string;
	password?: string;
	remember?: string;
};
const Forms = ({
	showMenu = false,
	showSelect = false,
	showSearch = false,
	showReset = false
}) => {
	const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
		console.log('Success:', values);
	};
	const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};
	const handleChange = (value: string) => {
		console.log(`selected ${value}`);
	};

	return (
		<div>
			<Form
				layout='inline'
				name="basic"
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 9 }}
				style={{ maxWidth: 1000 }}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off"
			>
				{showMenu && (
					<Form.Item<FieldType>
						label="菜单名称"
						name="username"
						rules={[{ required: true, message: '请输入菜单名称!' }]}
					>
						<Input />
					</Form.Item>

				)}
				{showSelect && (
					<Form.Item<FieldType>
						label="状态"
						name="password"
						rules={[{ required: true, message: '请选择状态!' }]}
					>
						<Select
							style={{ width: 120 }}
							onChange={handleChange}
							options={[
								{ value: '正常', label: '正常' },
								{ value: '错误', label: '错误' },
							]}
						/>
					</Form.Item>
				)}
				{
					showSearch && (
						<Form.Item label={null}>
							<Button type="primary" htmlType="submit">
								搜索
							</Button>

						</Form.Item>
					)
				}
				{
					showReset && (
						<Form.Item label={null}>
							<Button type="primary" htmlType='reset'>
								重置
							</Button>
						</Form.Item>
					)
				}

			</Form>
		</div>
	)
}

export default Forms